<template>
  <div class="todo-container">
    <div class="todo">
      <!-- 标题 -->
      <div class="todo_title">
        <h1>待办事项</h1>
        <p>一次只做一件事</p>
      </div>
      <!-- 任务列表 -->
      <div class="todo_list" v-if="this.dataArr.length!==0">
        <transition-group name="flip-list" tag="div">
          <div class="todo_item" v-for="(item, index) in dataArr" :key="index">
            <!-- 任务名称 -->
            <div class="todo_name" :class="item.isReady ? 'strikethrough' : ''">
              {{ item.name }}
            </div>
            <!-- 操作 -->
            <div class="todo_icon">
              <el-tooltip class="item" effect="light" content="标记完成" placement="bottom-start" :visible-arrow="false">
                <el-checkbox v-model="item.isReady"></el-checkbox>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="删除" placement="bottom-start" :visible-arrow="false">
                <i class="el-icon-delete" @click="handleDelete(index)"></i>
              </el-tooltip>
            </div>
          </div>
        </transition-group>
      </div>
      <!-- 消息提示 -->
      <div class="todo_message" v-else>没有代办事项</div>
      <!-- 完成的移动 -->
      <div class="todo_moved">
        <span>完成的移动到底部</span>
        <el-switch v-model="switchValue" active-color="#eee" inactive-color="#eee" @change="handleSwitch"></el-switch>
      </div>
      <!-- 添加事务 -->
      <div class="todo_add">
        <h2>添加待办事项</h2>
        <el-form ref="form" :model="form" label-width="0px">
          <el-form-item>
            <!-- 输入 -->
            <el-input v-model="form.name" @keyup.enter.native="handleAdd()"></el-input>
          </el-form-item>
          <!-- 添加 -->
          <el-button @click="handleAdd()">添加</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      switchValue: false,
      dataArr: [
        {
          id: 0,
          name: "学习1",
          isReady: false,
        },
        {
          id: 1,
          name: "学习2",
          isReady: false,
        },
        {
          id: 2,
          name: "学习3",
          isReady: false,
        },
      ],
      form: {
        id: 0,
        name: "",
        isReady: false,
      },
    };
  },
  methods: {
    //删除
    handleDelete(index) {
      this.dataArr.splice(index, 1);
    },
    //添加事项
    handleAdd() {
      if (this.form.name !== "") {
        var id = this.dataArr.length + 1;
        this.form.id = id;
        this.form.isReady=false;
        this.dataArr.unshift(this.form);
        this.form = {};
      } else {
        this.$message("请输入内容");
      }
      return;
    },
  },
    computed:{
    handleSwitch() {
      if (this.switchValue) {
        this.dataArr = _.sortBy(this.dataArr, ["isReady"]);
      }
    },
  },
};

</script>
<style lang="less" scoped>
.todo-container {
  .todo {
    margin: 4rem auto;
    max-width: 500px;
    background: #ff6666;
    color: #fff;
    box-shadow: -20px -20px 0px 0px rgb(100 100 100 / 10%);
    .todo_title {
      padding: 1.1rem 3rem;
      letter-spacing: 0.5em;
      h1 {
        font-size: 2.8em;
      }
      p {
        padding: 5px 0;
        border-bottom: 1px solid #fff;
      }
    }
    .todo_list {
      margin-top: 2.5em;
      .todo_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.1rem 3rem;
        margin-top: 10px;
        background: rgba(255, 255, 255, 0.1);
        .todo_name {
          text-align: center;
          // border: 1px solid #fff;
        }
        // 动画删除线
        .strikethrough {
          display: inline-block;
          position: relative;
        }
        .strikethrough:after {
          content: "";
          position: absolute;
          display: block;
          width: 120%;
          height: 2px;
          text-align: center;
          margin-top: -0.7em;
          background: #fff;
          transform-origin: center left;
          animation: strikethrough 0.5s 0s cubic-bezier(0.55, 0, 0.1, 1) 1 both;
        }
        .todo_icon {
          .item{
            border-radius: 0;
          }
          .el-icon-delete {
           margin-left: 13px;
          }
        }
      }
    }
    .todo_message{
      margin-top: 2.6em;
      text-align: center;
      letter-spacing: .05em;
      font-style: italic;
      opacity: 0.8;
    }
    .todo_moved {
      margin-top: 15px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 1.1rem 3rem;
      .el-switch {
        margin-left: 15px;
      }
    }
    .todo_add {
      margin-top: 28px;
      padding: 1.1rem 3rem;
      h2 {
        margin-bottom: 10px;
      }
      .el-form {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-form-item {
          width: 100%;
          margin-right: 30px;
          margin-bottom: 0;
          outline-color: #fff;
        }
      }
    }
  }
}
 @keyframes strikethrough {
          from {
            transform: scaleX(0);
          }
          to {
            transform: scaleX(1);
          }
        }
</style>